<template>
  <div id="views" class="views">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
import * as Cesium from 'cesium/Build/Cesium/Cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'

Cesium.buildModuleUrl.setBaseUrl('static/Cesium/')
export default {
  name: 'Test',
  mounted () {
    // eslint-disable-next-line no-unused-vars
    var viewer = new Cesium.Viewer('cesiumContainer', {
      animation: false, // 是否显示动画控件
      baseLayerPicker: false, // 是否显示图层选择控件
      homeButton: false, // 是否显示home控件
      geocoder: true, // 是否显示地名查找控件
      timeline: false, // 是否显示时间线控件
      sceneModePicker: false, // 是否显示投影方式控件
      navigationHelpButton: false, // 是否显示帮助信息控件
      infoBox: true, // 是否显示点击要素之后显示的信息
      fullscreenButton: false, // 是否显示全屏控件
      vrButton: false, // 是否显示vr控件
      selectionIndicator: false // 是否显示点击要素之后显示选中框
      // // 加载高德/百度影像地图，UrlTemplateImageryProvider该接口是加载谷歌地图服务的接口
      // imageryProvider: new Cesium.UrlTemplateImageryProvider({
      //   url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
      //   layer: 'tdtVecBasicLayer',
      //   style: 'default',
      //   format: 'image/png',
      //   tileMatrixSetID: 'GoogleMapsCompatible',
      //   show: false
      // })
    })
    // // 如果需要叠加高德/百度注记地图则添加以下代码
    // viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
    //   url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
    //   layer: 'tdtAnnoLayer',
    //   style: 'default',
    //   format: 'image/jpeg',
    //   tileMatrixSetID: 'GoogleMapsCompatible'
    // }))

    // eslint-disable-next-line no-unused-vars
    function createModel (url, height) {
      // viewer.entities.removeAll()

      var position = Cesium.Cartesian3.fromDegrees(106.32039, 29.620561, height)
      var heading = Cesium.Math.toRadians(90)
      var pitch = Cesium.Math.toRadians(0)
      var roll = 0
      var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)

      var entity = viewer.entities.add({
        name: '一个模型', // 要素信息名/模型名
        position: position, // 模型位置
        orientation: orientation, // 航向俯仰横摇四元数
        model: {
          uri: url, // 模型url
          scale: 8, // 缩放比例
          // minimumPixelSize: 128, // 模型最小像素大小
          maximumScale: 20000
        }
      })
      viewer.trackedEntity = entity
    }

    createModel(
      'static/model/fbx/cqcet/重电.glb',
      0
    )

    createModel(
      'static/model/fbx/cqcet/tower15.glb',
      0
    )

    // viewer.camera.setView({
    //   destination: Cesium.Cartesian3.fromDegrees(106.32039, 29.620561, 1500),
    //   orientation: {
    //     heading: Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north)
    //     pitch: Cesium.Math.toRadians(-90), // default value (looking down)
    //     roll: 0.0 // default value
    //   }
    // })

    // viewer.camera.flyTo({ // setView是直接跳到 flyTo// 是镜头飞行到  网速不好或者电脑配置不高 还是不要fly了吧
    //   destination: Cesium.Cartesian3.fromDegrees(106.32039, 29.620561, 1500), // 经纬度坐标转换为 笛卡尔坐标(世界坐标)
    //   orientation: {
    //     heading: Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north) //东西南北朝向
    //     pitch: Cesium.Math.toRadians(-90), // default value (looking down)  //俯视仰视视觉
    //     roll: 0.0 // default value
    //   },
    //   duration: 3 // 3秒到达战场
    // })
  }
}
</script>

<style scoped>
.views {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
